<template>
  <div class="LogRecord">
    <div class="logRecordOption">
      <span>{{$t('请选择月份：')}}</span>
      <el-select v-model="month" :placeholder="$t('请选择')" size="small" style="width:220px;" filterable @change="listData">
        <el-option v-for="(value, key) in monthList" :key="value" :label="$t(key)" :value="value">
        </el-option>
      </el-select>
      <el-button type="danger" size='small' @click="clearListData" style="margin:0 10px;">{{$t('清空日志')}}</el-button>
      <!-- <span>{{$t('日志展示模式：')}}
        <el-switch :width="lang === 'zh'?70:80" v-model="record.actionType" @change="actionTypeChange" class="switch" active-color="#009966" inactive-color="#409EFF" active-value="index" inactive-value="session" :active-text="$t('检索版')" :inactive-text="$t('会话版')"></el-switch>
      </span> -->
      <el-button circle type="primary" size='small' @click="listData" style="float:right;margin-right:5%;" icon="el-icon-refresh"></el-button>
    </div>
    <el-table key="multipleTable" @sort-change='sortChange' ref="multipleTable" size='mini' :data="tableList" :row-key='getRowKey' tooltip-effect="dark" v-loading="loading" style="width: 100%">
      <el-table-column prop="TIME" align='center' sortable='custom' :label="$t('时间')" :formatter="timeFormatter" min-width="150"></el-table-column>
      <el-table-column prop="MODE" align='center' :label="$t('模块')" min-width="120">
        <template slot-scope="scope">
          {{ $t(modeList[scope.row.MODE]) }}
        </template>
      </el-table-column>
      <el-table-column prop="LEVEL" align='center' sortable='custom' :label="$t('级别')" min-width="80">
        <template slot-scope="scope">
          {{ levelList[scope.row.LEVEL] }}
        </template>
      </el-table-column>
      <el-table-column prop="MSG" align='center' :label="$t('信息')" min-width="400">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.MSG" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="SIP" align='center' :label="$t('源地址')" min-width="150">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.SIP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="DIP" align='center' :label="$t('目的地址')" min-width="150">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.DIP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="SPORT" align='center' :label="$t('源端口')" min-width="100"></el-table-column>
      <el-table-column prop="DPORT" align='center' :label="$t('目的端口')" min-width="100"></el-table-column>
      <el-table-column prop="L4TYPE" align='center' :label="$t('协议类型')" min-width="100"></el-table-column>
      <el-table-column prop="EVENT_TYPE" align='center' :label="$t('事件类型')" min-width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.EVENT_TYPE || $t('其他')" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="EVENT_ACTION" align='center' :label="$t('事件动作')" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.EVENT_ACTION?$t('eventaction.'+scope.row.EVENT_ACTION):scope.row.EVENT_ACTION }}
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-table v-else ref="multipleTableExpand" key="multipleTableExpand" size='mini' @sort-change='sortChange' :data="tableListExpand" @expand-change='expandChange' :row-class-name="tableRowClassName" :expand-row-keys="expands" :row-key='getRowKey' tooltip-effect="dark" v-loading="loading" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <LogRecordExpand :row='scope.row'></LogRecordExpand>
        </template>
      </el-table-column>
      <el-table-column prop="TIME" align='center' sortable='custom' :label="$t('会话时间')" :formatter="timeFormatter" min-width="150"></el-table-column>
      <el-table-column prop="MSG" align='center' :label="$t('信息')" min-width="400">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.MSG" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="SIP" align='center' :label="$t('源地址')" min-width="150">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.SIP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="DIP" align='center' :label="$t('目的地址')" min-width="150">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.DIP" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="SPORT" align='center' :label="$t('源端口')" min-width="150"></el-table-column>
      <el-table-column prop="DPORT" align='center' :label="$t('目的端口')" min-width="150"></el-table-column>
      <el-table-column prop="L4TYPE" align='center' :label="$t('协议类型')" min-width="100"></el-table-column>
    </el-table> -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="record.page" :page-size="record.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { logRecord, cleanDpLog, getMode } from '@/api/system/logData'
import { getTime } from '@/api/home'
import LogRecordExpand from './LogRecordExpand'
import moment from 'moment'
export default {
  name: 'LogRecord',
  components: {
    LogRecordExpand
  },
  data () {
    return {
      lang: this.$i18n.locale,
      month: '',
      record: {
        startTime: '',
        endTime: '',
        // actionType: 'index',
        page: 1,
        limit: 20,
        FIELD: '',
        ORDERTYPE: ''
      },
      loading: false,
      total: 0,
      tableList: [],
      tableListExpand: [],
      monthList: {},
      expands: [],
      onIndex: null,
      modeList: {},
      levelList: {
        1: 'ERROR',
        2: 'ALERT',
        3: 'INFO',
        4: 'DEBUG'
      },
      protocolList: {
        'ICMP': 'ICMP',
        'TCP': 'TCP'
      },
      eventTypeList: {
        'Land攻击': 'Land攻击',
        'Smurf攻击': 'Smurf攻击',
        'nat': 'nat'
      },
      eventActionList: {
        'DROP': '丢弃',
        'REJECT': '拒绝',
        'SE': '安全引擎',
        'ACCEPT': '允许',
        'ALERT': '告警',
        'BLOCK': '阻断',
        'RESET': '拒绝',
        'RateLimit DROP': '限速丢弃',
        'BlackList DROP': '黑名单丢弃',
        'SNAT': '源地址转换',
        'DNAT': '目的地址转换'
      },
      sortList: {
        'descending': 'desc',
        'ascending': 'asc'
      }
    }
  },
  created () {
    getMode().then(res => {
      if (res.status === 0) {
        this.modeList = {}
        for (let item of res.info) {
          this.modeList[item.name] = item.chinese_name
        }
      }
    })
    this.monthList = {}
    getTime().then(res => {
      if (res.status === 0) {
        let time = res.info[0].date
        this.month = moment(time).startOf('month').format('YYYY-MM-DD HH:mm:ss') + ',' + moment(time).endOf('month').format('YYYY-MM-DD HH:mm:ss')
        for (let item of [0, 1, 2, 3, 4, 5]) {
          // moment(time).subtract(item, 'months').endOf('month').format('YYYY-MM-DD HH:mm:ss')
          let month = moment(time).subtract(item, 'months').month() + 1
          this.monthList[month + '月'] = moment(time).subtract(item, 'months').startOf('month').format('YYYY-MM-DD HH:mm:ss') + ',' + moment(time).subtract(item, 'months').endOf('month').format('YYYY-MM-DD HH:mm:ss')
        }
        this.listData()
      }
    })
  },
  methods: {
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.record.limit = val
      this.record.page = 1
      this.listData()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.record.page = val
      this.listData()
    },
    listData () {
      if (this.month) {
        // this.loading = true
        this.record.startTime = moment(this.month.split(',')[0]).format('X')
        this.record.endTime = moment(this.month.split(',')[1]).format('X')
        logRecord(this.record).then(res => {
          if (res.status === 0) {
            debugger
            if (this.record.actionType === 'session') {
              this.tableListExpand = res.info.data
            } else {
              this.tableList = res.info.data
            }
            this.total = res.info.count
          }
          // this.loading = false
        }).catch(er => {
          // this.loading = false
        })
      }
    },
    actionTypeChange () {
      this.record.limit = 20
      this.record.page = 1
      this.total = 0
      this.listData()
    },
    clearListData () {
      this.$confirm(this.$t('确定清空日志吗,清空日志需要一定时间!'), this.$t('提示'), {
        closeOnClickModal: false,
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        confirmButtonClass: 'confirmButton',
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        cleanDpLog().then(res => {
          if (res.status === 0) {
            this.$message({
              message: this.$t('清空成功'),
              type: 'success'
            })
            this.listData()
          }
        })
      })
    },
    timeFormatter (data) {
      return moment(new Date(data.TIME * 1000)).format('YYYY-MM-DD HH:mm:ss')
    },
    sortChange (column, prop, order) {
      if (column.order) {
        this.record.FIELD = column.prop
        this.record.ORDERTYPE = this.sortList[column.order]
      } else {
        this.record.FIELD = ''
        this.record.ORDERTYPE = ''
      }
      this.listData()
    },
    tableRowClassName ({ row, rowIndex }) {
      if (row.ID === this.onIndex) {
        return 'warning-row'
      }
      return ''
    },
    expandChange (row, expandedRows) {
      this.expands = []
      this.onIndex = null
      if (expandedRows.length > 0) {
        this.onIndex = row.ID
        this.expands.push(row.ID)
      }
    },
    getRowKey (row) {
      return row.ID
    }
  }
}
</script>
<style lang="less">
.LogRecord {
  .el-table .warning-row {
    background: rgb(95, 184, 120) !important;
    color: #fff;
  }
  .el-table .el-table__expanded-cell {
    background: #e6e6e6 !important;
  }
  /* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
  .el-table--enable-row-hover .el-table__body .warning-row:hover > td {
    background: rgb(95, 184, 120) !important;
  }
  .el-table--enable-row-hover .el-table__body .el-table__row:hover > td {
    color: #0033ff; /* 设置文字颜色，可以选择不设置 */
  }
}
</style>
